<template>
  <public-dialog
          title="新建领导交办"
          v-model:visible="visible"
          confirm-button-title="确认"
          width="30%"
          @onConfirm="
          onConfirm"
  >
    <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-position="top">
        <el-form-item label="事项说明" prop="superviseContent">
            <el-input
                    v-model="form.superviseContent"
                    :autosize="{ minRows: 5, maxRows: 10 }"
                    type="textarea"
                    placeholder="请输入事项说明"
            ></el-input>
        </el-form-item>
        <el-form-item label="执行人" prop="executeUserId">
            <el-select
                    clearable
                    v-model="form.executeUserId"
                    class="m-l5 select"
                    placeholder="选择执行人"
            >
                <el-option v-for="(item,index) in userList" :key="index" :value="item.userId" :label="item.userName"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="督办人" prop="superviseUserId">
            <el-select
                    clearable
                    v-model="form.superviseUserId"
                    class="m-l5 select"
                    placeholder="选择督办人"
            >
                <el-option v-for="(item,index) in userList" :key="index" :value="item.userId" :label="item.userName"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="计划完成时间" prop="planEndTime">
            <el-date-picker
                    class="data-picker"
                    v-model="form.planEndTime"
                    type="date"
                    placeholder="选择时间"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    size="large"
            />
        </el-form-item>
    </el-form>
  </public-dialog>
</template>

<script setup>
import PublicDialog from "@/components/PublicDialog.vue";
import {reactive, ref} from "vue";
import {ElForm, ElFormItem, ElSelect, ElOption, ElDatePicker, ElMessage} from "element-plus";
import {superviseAndHandle} from "@/api/project";
import {resetForm} from "@/common/utils/GlobalUtils";

const visible = ref(false);
const props = defineProps({
    userList:{
        type:Array,
        default:[]
    }
});

const form = reactive({
    superviseId:'',
    superviseContent:'',
    planEndTime: '',
    superviseType: '1',
    executeUserId:'',
    superviseUserId:'',
})

const rules  = reactive({
    superviseContent: [
        { required: true, message: '督办事项不能为空!', trigger: 'blur' },
    ],
    executeUserId: [
        { required: true, message: '请选择执行人!', trigger: 'change' },
    ],
    superviseUserId: [
        { required: true, message: '请选择督办人!', trigger: 'change' },
    ],
    planEndTime: [
        { required: true, message: '请选择计划完成时间!', trigger: 'change' },
    ],
});

/**
 * 打开弹窗
 */
const openPopup = () => {
    resetForm(form);
    form.superviseType = '1';
    visible.value = true;
    setTimeout(()=>{
        formRef.value.clearValidate();
    },20)
}

const formRef = ref(null);
const emits = defineEmits(['onSuccess']);

/**
 * 确认
 */
const onConfirm = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            superviseAndHandle.createSupervise(form).then(res=>{
                visible.value = false;
                if(res.code==='200'){
                    ElMessage.success('新增成功！');
                    emits('onSuccess');
                }
            });
        } else {
            console.log('error submit!', fields)
        }
    })
}

defineExpose({openPopup});
</script>

<style lang="scss" scoped>
.select{
  width: 100% !important;
}

:deep(.data-picker){
  width: 100% !important;
  .el-input__wrapper{
    width: 100% !important;
  }
}
</style>
